<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
    <style>
        .box{
            margin-top: 20px;
            width:100px;
            height:100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <!-- 
      在vue当中：可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
        事件监听
        事件处理方法
          vue中事件处理方法：@click="add()" 加不加()的区别
            绑定的函数不添加() 时，有默认参数event
            绑定的函数添加() 时，没有默认参数，如果需要使用 event，就传入($event)
          所以 一般 都不加()，只有需要传参的时候才加()
        内联处理器中的方法
          除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法： -- 就是调用函数的时候传参
        事件修饰符
           事件冒泡 / 阻止默认事件 都离不开事件对象event
           事件对象的处理其实也是DOM操作，在vue中不推荐广泛的使用DOM操作
           所以：vue中就有了事件修饰符
            .stop
            .self
            .prevent
            .capture
            .once  (点击事件只会触发一次)
            .passive (滚动行为立即触发)
           具体的使用方法去官方：https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
           修饰符可以串联：.stop.prevent :阻止事件冒泡和默认事件  且顺序很重要
           不要将 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
        按键修饰符
           搜索某一个产品 输入产品后 不点搜索，可以敲回车
           键盘当中按某一个键时,需要做一些处理
           .enter =  .13
        系统的修饰键 --  不推荐使用,并且基本用不到
           可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
           .ctrl
           .alt
           .shift
           .meta
     -->
    <div id="app">
      <!-- 1. 事件的监听 -->
        <div id="msg">{{count}}</div>
        <button onclick="addJsFn()">点击加一(JS语法)</button> <!-- JavaScript中的事件监听的写法  注意add后面一定要加() -->
        <button @click="count += 1">点击加一(VUE事件监听) ---- {{count}}</button> <!-- Vue中的事件监听的写法 -->
      
      <!-- 2. 事件的处理方法 -->
        <button @click="add">点击加一(VUE事件处理方法) ---- {{count}}</button> <!-- Vue中的事件处理函数的写法 注意add后面可加可不加()，传递参数时再加() -->

      <!-- 3. 内联处理器中的方法 (就表示 调用函数且传参) -->
        <button @click="add($event)">点击加一(VUE调用函数且传参) ---- {{count}}</button>
     
      <!-- 4. 事件修饰符  父加self / 子加stop 来阻止事件冒泡-->
        <div class="box"  @click="boxFn"> <!-- 点击box时，输出 ：点击box了 -->
            <button  @click="btnFn">按钮</button>  <!-- 点击按钮时，输出 ：点击按钮了 点击box了 -->
        </div>  <!--  这种情况就是事件的冒泡，所以要阻止冒泡(在JS中：在btnFn()函数中e.stopPropagation) -->
                <!-- 但是在vue中不赞成使用event,所以要在 <button>的点击事件中添加修饰符stop -->
  
        <!-- 子组件 添加.stop 修饰符阻止了事件冒泡 -->
        <div class="box"  @click="boxFn"> <!-- 点击box时，输出 ：点击box了 -->
            <button  @click.stop="btnFn">按钮</button>  <!-- 点击按钮时，输出 ：点击按钮了 点击box了 -->
        </div>
        <!-- 父组件 添加 .self 修饰符也能达到同样的效果 -->
        <div class="box"  @click.self="boxFn"> <!-- 点击box时，输出 ：点击box了 -->
            <button  @click="btnFn">按钮</button>  <!-- 点击按钮时，输出 ：点击按钮了 点击box了 -->
        </div>
    
      <!-- 5. 按键修饰符 -->
        <input type="text" @change="search" @keyup.enter="keyup" > <!-- 失去焦点触发change事件 ，键盘抬起触发keyup事件(输入的时候也有键盘抬起事件) ,所以要判断是回车的时候才触发 -->
        <input type="text" @change="search" @keyup.13="keyup" > <!-- 写.enter 和 写.13是一样的，因为enter的keyCode 是13 -->
    </div>
</body>
<script>
    const vm = new Vue({
        el:"#app",
        data:{
            count:0,
        },
        methods:{ // vue中的事件处理方法要放在methods中
            add(event){
                // 绑定的函数不加()时，事件含有默认参数event ; 绑定的函数加了()时，就没有默认参数
                console.log(event) // 27行：不加()时： 输出 event对象  ; 加了()时，输出 undefined
                this.count += 1 // 为什么不是 this.data.count -- 注意：vue中的data/methods只是个标注，没有实际的意义
            },
            boxFn(){
                console.log('点击box了')
            },
            btnFn(){
                console.log('点击按钮了')
            },
            search(){
                console.log('失去焦点了')
            },
            keyup(){
                console.log('键盘抬起了')
            }
        }
    })

    var a = 0 // 初始值
    function addJsFn(){
        a++
        document.getElementById('msg').innerText = a // 把a的值写入到id="msg"的标签中
    }
</script>
</html>